<template>
  <div>
    <el-button type="primary" size="default" @click="handleCategoryGet(1)">
      获取fnji网站的家具分类
    </el-button>
    <el-button type="primary" size="default" @click="handleCategoryGet(2)">
      获取fnji网站的家居分类
    </el-button>
    <el-button type="primary" size="default" @click="handleTestPost">
      测试POST接口爬取
    </el-button>

    <!-- 展示转存的LeanCloud数据 -->
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane label="家具" name="first"></el-tab-pane>
      <el-tab-pane label="家居" name="second"></el-tab-pane>
    </el-tabs>

    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="name" label="分类名称" width="160" />
      <el-table-column prop="fnjiType" label="主分类标志" width="160" />
      <el-table-column prop="value" label="子分类编号" />
      <el-table-column label="操作">
        <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.$index, scope.row)">
            编辑
          </el-button>
          <el-button
            size="small"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
          >
            删除
          </el-button>
          <el-button
            @click="handleProdcutGet(scope.row,scope.$index)"
            type="primary"
            size="small"
            :disabled="scope.row.saveType"
          >
            {{scope.row.saveType==1?'数据已转存':'转存商品数据'}}
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <div style="height: 100px"></div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import {
  categoryGet,
  categoryPut,
  fnjiCategoryBatch,
  fnjiCategoryGet,
  fnjiProductBatch,
  fnjiProductGet,
  testPost,
} from "../../api/category";
const handleCategoryGet = async (type) => {
  // 1. 获取第三方网站数据
  let res = await fnjiCategoryGet(type);
  console.log(res); //log完整的res数据包，观察后提取自己需要的数据

  // 2. 将第三方数据批量录入LeanCloud
  await fnjiCategoryBatch(res.data.data, type);
};
const handleTestPost = () => {
  testPost();
};

//展示转存的分类数据
const tableData = ref([
  {
    value: "C09",
    name: "椅/凳",
    fnjiType: 1,
  },
]);
const activeName = ref("first");
const handleClick = async (tab) => {
  let type = Number(tab.index) + 1; //主类目的标志1 或 2
  console.log(type);
  let res = await categoryGet(type);
  console.log(res);
  tableData.value = res.data.results;
};

// 首屏数据加载
let res = await categoryGet(1); //setup中的顶层await，配合为父组件添加Suspense才能使用
console.log(res);
tableData.value = res.data.results;

// 转存商品数据
const handleProdcutGet = async (row,idx) => {
  // console.log("按钮对应这一行的数据包", row);
  let res = await fnjiProductGet(row.value,row.fnjiType) //1. 爬取商品数据
  console.log(res);
  await fnjiProductBatch(res.data.data)  //2. 转存商品数据
  await categoryPut(row.objectId,{saveType:1})  //3. 更新分类表中，商品数据转存状态
  tableData.value[idx].saveType = 1 // 4. 更新本地表格数据的转存状态
};
</script>

<style lang="scss" scoped>
.demo-tabs > .el-tabs__content {
  padding: 0;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
</style>
